﻿<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <base th:href="${#request.getContextPath()}+'/'">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5shiv.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../plugins/bootstrap-3.3.7-dist/css/bootstrap.css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>建材列表</title>
    <link rel="stylesheet" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
</head>
<body class="pos-r">
        <div class="pos-a"
             style="width:200px;left:0;top:0; bottom:0; height:100%; border-right:1px solid #e5e5e5; background-color:#f5f5f5; overflow:auto;">
            <div id="typeTreeView"></div>
        </div>
        <div style="margin-left:200px;">
            <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 业务管理 <span
                    class="c-gray en">&gt;</span> 产品列表 <a class="btn btn-success radius r"
                                                          style="line-height:1.6em;margin-top:3px"
                                                          href="javascript:location.replace(location.href);" title="刷新"><i
                    class="Hui-iconfont">&#xe68f;</i></a>
            </nav>
                <div class="mt-20">
                    <table class="table table-bordered">
                        <tr>
                            <td>
                                <button class="btn btn-primary" onclick="updateGoodsState(1)">批量上架</button>
                                <button class="btn btn-danger" onclick="updateGoodsState(2)">批量下架</button>
                                <button class="btn">置顶</button>
                                <button class="btn btn-success">推荐</button>
                                <table class="table table-border table-bordered table-hover table-bg">
                            </td>
                        </tr>

                            <thead>
                            <tr class="text-c">
                                <th>序号</th>
                                <th>选择</th>
                                <th>商品名称</th>
                                <th>商品图片</th>
                                <th>商品图片</th>
                                <th>商品图片</th>
                                <th>商户名称</th>
                                <th>是否置顶</th>
                                <th>是否推荐</th>
                                <th>套餐</th>
                                <th width="60">发布状态</th>
                                <!--<th width="100">操作</th>-->
                            </tr>
                            </thead>
                            <tbody id="goodsBody">

                            </tbody>
                        </table>
                    </table>
                    <div >
                        <nav aria-label="Page navigation">
                            <ul class="pagination" id="pageList">
                            </ul>
                        </nav>
                    </div>
                    <input type="hidden" id="typeId">
                </div>
        </div>


<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="../plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="../plugins/bootstrap-ztree/js/bootstrap-treeview.min.js"></script>
<script type="text/javascript">
    function updateGoodsState(state) {
        //获取选择的商品的id
        var cbs = $("input[name='cbs']");
        var ids = [];
        var index = 0;
        for (var i = 0; i < cbs.length; i++) {
            if (cbs[i].checked) {
                ids[index] = cbs[i].value;
                index++;
            }
        }
        console.log(ids);
        var obj = {};
        obj['state'] = state;
        obj['ids'] = ids;

        $.ajax({
            url: "goods/updatestate",
            type: "POST",
            data: JSON.stringify(obj),
            contentType: "application/json",
            success: function (data) {
                console.log(data);
                if (data.code == 1) {
                    for (var i = 0; i < ids.length; i++) {
                        if (state == 1) {
                            $("#state_" + ids[i]).html("已上架");
                            $("#state_" + ids[i]).css("color", "green");
                        } else if (state == 2) {
                            $("#state_" + ids[i]).html("已下架");
                            $("#state_" + ids[i]).css("color", "blue");
                        }
                    }

                }
            }
        });

    }

    $(function () {
       $.post("type/list",function (treeData) {
           console.log(treeData);
           $("#typeTreeView").treeview({
               data:treeData,
           });
           $('#typeTreeView').on('nodeSelected',function (event,data) {
               $("#typeId").val(data.href);
               refreshDataByType(data.href,1)
           });
       },"json");
        refreshData(1);
    });

    function showData (resultData,s) {
        var arr =resultData.data;
        $("#goodsBody").html("");
        for(var i=0;i<arr.length;i++){
            var goods  = arr[i];
            var str1 = goods.toped == 0?"<label style='color:gray'>未置顶</label>":"<label style='color:red'>已置顶</label>";
            var str2 = goods.recomed == 0?"<label style='color:gray'>未推荐</label>":"<label style='color:red'>已推荐</label>";
            var str3 = "<label id='state_"+goods.goodId+"' style='background: deepskyblue color:red'>未审核</label>";
            if (goods.state == 1){
                str3 = "<label id='state_"+goods.goodId+"' style ='color :green'>已上架</label>";
            }else if(goods.state == 2){
                str3 = "<label id='state_"+goods.goodId+"' style ='color :blue'>已下架</label>";
            }


            var trStr = "<tr>"+
                "<td>"+(i+1)+"</td>"+
                "<td><input type='checkbox' name='cbs' value='"+goods.goodId+"'/></td>"+
                "<td>"+goods.goodName+"</td>"+
                "<td><img src='"+goods.goodPic+"' style='height: 35px'/></td>"+
                "<td><img src='"+goods.goodPic1+"' style='height: 35px'/></td>"+
                "<td><img src='"+goods.goodPic2+"' style='height: 35px'/></td>"+
                "<td>"+goods.customerId+"</td>"+
                "<td>"+str1+"</td>"+
                "<td>"+str2+"</td>"+
                "<td><a href='#'>查看套餐</a></td>"+
                "<td>"+str3+"</td>"+
                "</tr>"
            $("#goodsBody").append(trStr);
        }
        var pageCount = resultData.pageCount;
        var pageNum = resultData.pageNum;

        $("#pageList").html("");
        $("#pageList").append("<li><a onclick='refresh(1,"+s+")'>首页</a></li>");
        for (var i=1;i<=pageCount;i++) {
            var liTag ="";
            if (i == pageNum) {
                liTag = "<li><a  style='background: deepskyblue; color: white'>"+i+"</a></li>";
            } else {
                liTag = "<li><a  onclick='refresh("+i+","+s+")'>"+i+"</a></li>";
            }
            $("#pageList").append(liTag);
        }
        $("#pageList").append("<li><a onclick='refresh("+pageCount+","+s+")'>尾页</a></li>");
    };

    function refresh(pn,s) {
        //s 表示是否根据条件查询,
        if(s==0){
            refreshData(pn);
        }else{
           var tid =  $("#typeId").val();
            refreshDataByType(tid,pn);
        }
    };

    function refreshData(pn) {
        $.post("goods/list",{pageNum:pn},function(resultData) {
            showData(resultData,0);
        },"json")
    };

    function refreshDataByType(tid,pn) {
        $.post("goods/list2",{typeId:tid,pageNum:pn},function(resultData) {
            showData (resultData,1);
        },"json")
    }


    // /*产品-添加*/
    // function product_add(title, url) {
    //     var index = layer.open({
    //         type: 2,
    //         title: title,
    //         content: url
    //     });
    //     layer.full(index);
    // }
    //
    // /*产品-查看*/
    // function product_show(title, url, id) {
    //     var index = layer.open({
    //         type: 2,
    //         title: title,
    //         content: url
    //     });
    //     layer.full(index);
    // }
    //
    // /*产品-审核*/
    // function product_shenhe(obj, id) {
    //     layer.confirm('审核文章？', {
    //             btn: ['通过', '不通过'],
    //             shade: false
    //         },
    //         function () {
    //             $(obj).parents("tr").find(".td-manage").prepend('<a class="c-primary" onClick="product_start(this,id)" href="javascript:;" title="申请上线">申请上线</a>');
    //             $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已发布</span>');
    //             $(obj).remove();
    //             layer.msg('已发布', {icon: 6, time: 1000});
    //         },
    //         function () {
    //             $(obj).parents("tr").find(".td-manage").prepend('<a class="c-primary" onClick="product_shenqing(this,id)" href="javascript:;" title="申请上线">申请上线</a>');
    //             $(obj).parents("tr").find(".td-status").html('<span class="label label-danger radius">未通过</span>');
    //             $(obj).remove();
    //             layer.msg('未通过', {icon: 5, time: 1000});
    //         });
    // }
    //
    // function product_oper(obj, id, state) {
    //     if (state == 0) {//待审核
    //         product_start(obj, id);
    //     } else if (state == 1) {//已上架
    //         product_stop(obj, id);
    //     } else if (state == 2) {// 已下架
    //         product_start(obj, id);
    //     }
    // }
    //
    // /*产品-下架*/
    // function product_stop(obj, id) {
    //     layer.confirm('确认要下架吗？', function (index) {
    //         //当点击确定时，则进入到方法体中
    //         //如果进入到当前这个方法体中则可以执行相应的操作
    //         $.get("/good/updateStateByGoodId?goodId=" + id + "&state=2", function (data) {
    //             if (data.success) {
    //                 $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="product_start(this,id)" href="javascript:;" title="发布"><i class="Hui-iconfont">&#xe603;</i></a>');
    //                 $(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已下架</span>');
    //                 $(obj).remove();
    //                 layer.msg('已下架!', {icon: 5, time: 1000});
    //             } else {
    //                 alert(data.message);
    //             }
    //         });
    //
    //     });
    // }
    //
    // /*产品-发布*/
    // function product_start(obj, id) {
    //     layer.confirm('确认要发布吗？', function (index) {
    //         $.get("/good/updateStateByGoodId?goodId=" + id + "&state=1", function (data) {
    //             if (data.success) {
    //                 $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="product_stop(this,id)" href="javascript:;" title="下架"><i class="Hui-iconfont">&#xe6de;</i></a>');
    //                 $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已上架</span>');
    //                 $(obj).remove();
    //                 layer.msg('已发布!', {icon: 6, time: 1000});
    //             } else {
    //                 alert(data.message);
    //             }
    //         });
    //     });
    // }
    //
    // /*产品-申请上线*/
    // function product_shenqing(obj, id) {
    //     $(obj).parents("tr").find(".td-status").html('<span class="label label-default radius">待审核</span>');
    //     $(obj).parents("tr").find(".td-manage").html("");
    //     layer.msg('已提交申请，耐心等待审核!', {icon: 1, time: 2000});
    // }
    //
    // /*产品-编辑*/
    // function product_edit(title, url, id) {
    //     var index = layer.open({
    //         type: 2,
    //         title: title,
    //         content: url
    //     });
    //     layer.full(index);
    // }
    //
    // /*产品-删除*/
    // function product_del(obj, id) {
    //     layer.confirm('确认要删除吗？', function (index) {
    //         $.ajax({
    //             type: 'POST',
    //             url: '',
    //             dataType: 'json',
    //             success: function (data) {
    //                 $(obj).parents("tr").remove();
    //                 layer.msg('已删除!', {icon: 1, time: 1000});
    //             },
    //             error: function (data) {
    //                 console.log(data.msg);
    //             },
    //         });
    //     });
    // }
</script>
<!--<script type="text/javascript">-->
    <!--$(function () {//jquery语法：界面加载完成后，才会加载代码块的JS脚本-->
        <!--//1. 先获取 select的所有child元素-->
        <!--$("#stateSelect option").each(function () {-->
            <!--//2. 循环每个child元素，获取它的value属性的值-->
            <!--if ($("#selectedState").val() == $(this).val()) {-->
                <!--//3. 将这个属性的值 与 $("#state")埋比较，如果相等，则将当前这个child元素添加属性 ： selected='true'-->
                <!--$(this).attr("selected", "true");-->
                <!--return;-->
            <!--}-->
        <!--})-->


    <!--})-->
<!--</script>-->
</body>
</html>